<template>
  <view class="order-page">
    <!-- 分段器 -->
    <uni-segmented-control
      :current="currentTab"
      :values="tabList"
      @clickItem="onTabChange"
      styleType="text"
      activeColor="#007AFF"
    />

    <!-- 订单列表（根据当前分段器状态渲染） -->
    <view class="order-list">
      <!-- 全部订单 -->
      <view v-if="currentTab === 0">
        <view 
          class="order-card" 
          v-for="(order, index) in allOrders" 
          :key="index"
          @click="goToOrderDetail(order)"
        >
          <view class="order-header">
            <text class="order-id">订单编号:{{ order.orderNo }}</text>
            <view>></view>
          </view>
      
          <view class="order-info">
            <text>服务项目: {{ order.service }}</text>
            <view class="store">
              <view style="display: flex;">
                <text>服务门店: {{ order.shop }} </text>
          <image src="/static/plane.png" style="width: 25rpx;height: 32rpx;margin-left: 10rpx;" mode=""></image>
              </view>
        <view :class="['order-status', order.statusClass]" style="margin-right: 30rpx;font-size: 28rpx;">{{ order.statusText }}</view>
            </view>
            <text>下单时间: {{ order.time }}</text>
          </view>
          
          <view class="order-amount">
            <text>{{ order.amountType }}: {{ order.amount }}元</text>
            <view class="btn-group">
              <button 
                v-for="(btn, btnIndex) in order.buttons" 
                :key="btnIndex"
                :class="['order-btn', btn.class]" 
                @click.stop="handleBtnClick(btn.action, order)"
              >
                <text>{{ btn.text }}</text>
              </button>
            </view>
          </view>
        </view>
      </view>

      <!-- 待支付订单 -->
      <view v-if="currentTab === 1">
        <view 
          class="order-card" 
          v-for="(order, index) in pendingPayOrders" 
          :key="index"
          @click="goToOrderDetail(order)"
        >
          <view class="order-header">
            <text class="order-id">订单编号:{{ order.orderNo }}</text>
            <view>></view>
          </view>
          <view class="order-info">
            <text>服务项目: {{ order.service }}</text>
            <view class="store">
              <view style="display: flex;">
                <text>服务门店: {{ order.shop }} </text>
          <image src="/static/plane.png" style="width: 25rpx;height: 32rpx;margin-left: 10rpx;" mode=""></image>
              </view>
        <view class="order-status pending-pay" style="margin-right: 30rpx;font-size: 28rpx;">待支付</view>
            </view>
            <text>下单时间: {{ order.time }}</text>
          </view>
          <view class="order-amount">
            <text>应付: <text class="amount-red">{{ order.amount }}元</text></text>
            <view class="btn-group">
              <button class="order-btn cancel-btn" @click.stop="handleBtnClick('cancel', order)">取消订单</button>
              <button class="order-btn pay-btn" @click.stop="handleBtnClick('pay', order)">立即支付</button>
            </view>
          </view>
        </view>
      </view>

      <!-- 待使用订单 -->
      <view v-if="currentTab === 2">
        <view 
          class="order-card" 
          v-for="(order, index) in pendingUseOrders" 
          :key="index"
          @click="goToOrderDetail(order)"
        >
          <view class="order-header">
            <text class="order-id">订单编号:{{ order.orderNo }}</text>
            <view>></view>
          </view>
          <view class="order-info">
            <text>服务项目: {{ order.service }}</text>
            <view class="store">
              <view style="display: flex;">
                <text>服务门店: {{ order.shop }} </text>
          <image src="/static/plane.png" style="width: 25rpx;height: 32rpx;margin-left: 10rpx;" mode=""></image>
              </view>
        <view class="order-status pending-use" style="margin-right: 30rpx;font-size: 28rpx;">待使用</view>
            </view>
            <text>下单时间: {{ order.time }}</text>
          </view>
          <view class="order-amount">
            <text>实付: <text class="amount-red">{{ order.amount }}元</text></text>
            <view class="btn-group">
              <button class="order-btn refund-btn" @click.stop="handleBtnClick('refund', order)">申请退款</button>
              <button class="order-btn settle-btn" @click.stop="handleBtnClick('settle', order)">扫码结算</button>
            </view>
          </view>
        </view>
      </view>

      <!-- 待评价订单 -->
      <view v-if="currentTab === 3">
        <view 
          class="order-card" 
          v-for="(order, index) in pendingReviewOrders" 
          :key="index"
          @click="goToOrderDetail(order)"
        >
          <view class="order-header">
            <text class="order-id">订单编号:{{ order.orderNo }}</text>
            <view>></view>
          </view>
          <view class="order-info">
            <text>服务项目: {{ order.service }}</text>
            <view class="store">
              <view style="display: flex;">
                <text>服务门店: {{ order.shop }} </text>
          <image src="/static/plane.png" style="width: 25rpx;height: 32rpx;margin-left: 10rpx;" mode=""></image>
              </view>
        <view class="order-status pending-review" style="margin-right: 30rpx;font-size: 28rpx;">待评价</view>
            </view>
            <text>下单时间: {{ order.time }}</text>
          </view>
          <view class="order-amount">
            <text>实付: {{ order.amount }}元</text>
            <view class="btn-group">
              <button class="order-btn gray-btn" @click.stop="handleBtnClick('review', order)">立即评价</button>
              <button class="order-btn blue-btn" @click.stop="handleBtnClick('reorder', order)">再来一单</button>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 空状态 -->
      <view v-if="showEmpty" class="empty-state">
        <image src="/static/empty-order.png" class="empty-image"></image>
        <text class="empty-text">暂无订单</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';

// 分段器标签
const tabList = ref(['全部', '待支付', '待使用', '待评价']);
// 当前激活的分段器索引
const currentTab = ref(0);

// 切换分段器回调
const onTabChange = (e) => {
  currentTab.value = e.currentIndex;
  console.log('切换到:', currentTab.value);
};

// 基础订单数据
const baseOrders = [
  {
    orderNo: '24255252526',
    service: '车辆保养',
    shop: '大宝车辆维修店',
    time: '2023-03-12 12:09',
    amount: '230.56',
    status: 'pending-pay',
    statusText: '待支付',
    statusClass: 'pending-pay',
    amountType: '应付',
    buttons: [
      { text: '取消订单', class: 'cancel-btn', action: 'cancel' },
      { text: '立即支付', class: 'pay-btn', action: 'pay' }
    ]
  },
  {
    orderNo: '24255252528',
    service: '车辆清洗',
    shop: '大宝车辆维修店',
    time: '2023-03-11 10:30',
    amount: '39.90',
    status: 'pending-use',
    statusText: '待使用',
    statusClass: 'pending-use',
    amountType: '实付',
    buttons: [
      { text: '申请退款', class: 'refund-btn', action: 'refund' },
      { text: '扫码结算', class: 'settle-btn', action: 'settle' }
    ]
  },
  {
    orderNo: '24255252531',
    service: '车辆美容',
    shop: '大宝车辆维修店',
    time: '2023-03-10 15:20',
    amount: '159.00',
    status: 'pending-review',
    statusText: '待评价',
    statusClass: 'pending-review',
    amountType: '实付',
    buttons: [
      { text: '立即评价', class: 'gray-btn', action: 'review' },
      { text: '再来一单', class: 'blue-btn', action: 'reorder' }
    ]
  },
  {
    orderNo: '24255252522',
    service: '车辆保养',
    shop: '大宝车辆维修店',
    time: '2023-03-08 17:40',
    amount: '29.90',
    status: 'completed',
    statusText: '已完成',
    statusClass: 'completed',
    amountType: '实付',
    buttons: [
      { text: '再来一单', class: 'blue-btn', action: 'reorder' }
    ]
  },
  {
    orderNo: '24255252523',
    service: '车辆保养',
    shop: '大宝车辆维修店',
    time: '2023-03-07 14:15',
    amount: '29.90',
    status: 'canceled',
    statusText: '已取消',
    statusClass: 'canceled',
    amountType: '应付',
    buttons: [
      { text: '再来一单', class: 'blue-btn', action: 'reorder' }
    ]
  },
  {
    orderNo: '24255252524',
    service: '车辆保养',
    shop: '大宝车辆维修店',
    time: '2023-03-06 09:45',
    amount: '29.90',
    status: 'refunded',
    statusText: '已退款',
    statusClass: 'refunded',
    amountType: '实付',
    buttons: [
      { text: '再来一单', class: 'blue-btn', action: 'reorder' }
    ]
  }
];

// 全部订单（按时间倒序排序）
const allOrders = ref([...baseOrders].sort((a, b) => new Date(b.time) - new Date(a.time)));

// 待支付订单
const pendingPayOrders = computed(() => 
  baseOrders.filter(order => order.status === 'pending-pay')
    .sort((a, b) => new Date(b.time) - new Date(a.time))
);

// 待使用订单
const pendingUseOrders = computed(() => 
  baseOrders.filter(order => order.status === 'pending-use')
    .sort((a, b) => new Date(b.time) - new Date(a.time))
);

// 待评价订单
const pendingReviewOrders = computed(() => 
  baseOrders.filter(order => order.status === 'pending-review')
    .sort((a, b) => new Date(b.time) - new Date(a.time))
);

// 空状态显示
const showEmpty = computed(() => {
  switch (currentTab.value) {
    case 0: return allOrders.value.length === 0;
    case 1: return pendingPayOrders.value.length === 0;
    case 2: return pendingUseOrders.value.length === 0;
    case 3: return pendingReviewOrders.value.length === 0;
    default: return true;
  }
});

// 订单按钮点击事件
const handleBtnClick = (action, order) => {
  switch (action) {
    case 'reorder':
      uni.showToast({ title: '再来一单', icon: 'none' });
      break;
    case 'cancel':
      uni.showToast({ title: '取消订单', icon: 'none' });
      break;
    case 'pay':
      uni.navigateTo({
        url: `/pages/my/myOrder/payOrderDetail/payOrderDetail?orderNo=${order.orderNo}`
      });
      break;
    case 'refund':
      uni.showToast({ title: '申请退款', icon: 'none' });
      break;
    case 'settle':
      uni.navigateTo({
        url: `/pages/my/myOrder/orderWaiting/orderWaiting?orderNo=${order.orderNo}`
      });
      break;
    case 'review':
      uni.navigateTo({
        url: `/pages/my/myOrder/orderValuation/orderValuation?orderNo=${order.orderNo}`
      });
      break;
    default:
      break;
  }
};

// 跳转到订单详情页
const goToOrderDetail = (order) => {
  let url = '';
  switch (order.status) {
    case 'pending-pay':
      url = `/pages/my/myOrder/payOrderDetail/payOrderDetail?orderNo=${order.orderNo}`;
      break;
    case 'pending-use':
      url = `/pages/my/myOrder/orderWaiting/orderWaiting?orderNo=${order.orderNo}`;
      break;
    case 'pending-review':
      url = `/pages/my/myOrder/orderValuation/orderValuation?orderNo=${order.orderNo}`;
      break;
    case 'completed':
      url = `/pages/my/myOrder/orderCompleted/orderCompleted?orderNo=${order.orderNo}`;
      break;
    case 'canceled':
      url = `/pages/my/myOrder/orderCanceled/orderCanceled?orderNo=${order.orderNo}`;
      break;
    case 'refunded':
      url = `/pages/my/myOrder/orderRefunded/orderRefunded?orderNo=${order.orderNo}`;
      break;
    default:
      return;
  }
  uni.navigateTo({ url });
};

// 页面加载 - 接收参数并设置当前tab
onLoad((options) => {
  console.log('订单列表页加载', options);
  if (options.tabIndex) {
    const tabIndex = parseInt(options.tabIndex);
    if (tabIndex >= 0 && tabIndex <= 3) {
      currentTab.value = tabIndex;
    }
  }
});
</script>

<style scoped lang="scss">
.order-page {
  background-color: #f8f8f8;
  min-height: 100vh;

  .order-list {
    padding: 10px;

    .order-card {
      background-color: #fff;
      border-radius: 8px;
      padding: 15px;
      margin-bottom: 10px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

      .order-header {
      display: flex;
      justify-content: space-between;
      border-bottom: 5px solid #F8F8F8;
      padding-bottom: 10rpx;
        .order-id {
          font-size: 14px;
          color: #333;
          display: block;
        }
      }

      .order-info {
        display: flex;
        flex-direction: column;
        margin-bottom: 10px;
    border-bottom: 1px solid #f8f8f8;
    padding-bottom: 20rpx;
        text {
          font-size: 13px;
          color: #666;
          margin-bottom: 5px;
          display: flex;
          align-items: center;
        }

        .order-status {
          font-size: 13px;
        }

        .pending-pay {
          color: #007AFF;
        }

        .pending-use {
          color: #007AFF;
        }

        .pending-review {
          color: #007AFF;
        }

        .canceled {
          color: #999;
        }

        .refunded {
          color: #999;
        }

        .completed {
          color: #999;
        }
      }

      .order-amount {
        display: flex;
        justify-content: space-between;
        align-items: center;

        text {
          font-size: 14px;
          color: #333;
        }

        .amount-red {
          color: #f00;
        }

        .btn-group {
          display: flex;
          
          .order-btn {
            font-size: 12px;
            padding: 6px 12px;
            border-radius: 4px;
            margin-left: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 28px;

            &.gray-btn {
              background-color: #ccc;
              color: #fff;
            }

            &.blue-btn {
              background-color: #007AFF;
              color: #fff;
            }

            &.cancel-btn {
              background-color: #ccc;
              color: #fff;
            }

            &.pay-btn {
              background-color: #007AFF;
              color: #fff;
            }

            &.refund-btn {
              background-color: #ccc;
              color: #fff;
            }

            &.settle-btn {
              background-color: #007AFF;
              color: #fff;
            }
          }
        }
      }
    }

    // 空状态样式
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 100rpx 0;

      .empty-image {
        width: 200rpx;
        height: 200rpx;
        margin-bottom: 30rpx;
        opacity: 0.6;
      }

      .empty-text {
        font-size: 28rpx;
        color: #999;
      }
    }
  }
}
.store{
  display: flex;
  justify-content: space-between;
}
</style>